<template>
  <div>
    <!-- <div>jerry:{{ count }}</div> -->
    <!-- <div>{{ $store.getters.showJerryCount }}</div> -->
    <!-- <div>jerry:{{ jerryCount }} tom: {{ tomCount }}</div> -->
    <div>{{ showJerryCount }}</div>
    <button @click="addN">+N</button>
  </div>
</template>

<script>
import bus from '@/utils/eventBus'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapState(['jerryCount', 'tomCount']),
    ...mapGetters(['showJerryCount'])
  },
  mounted() {
    bus.$on('add-jerry', (data) => {
      this.count += data
    })
  },
  methods: {
    ...mapMutations(['addTom']),
    ...mapActions(['addTomSync']),
    addN() {
      // bus.$emit('add-tom', 3)
      // this.$store.state.tomCount += 3
      // this.$store.commit('addTom', 3)
      // this.$store.dispatch('addTomSync', 3)
      // this.addTom(3)
      this.addTomSync(3)
    }
  }
}
</script>

<style>

</style>
